import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
export default {
  install (app) {
    // 定义全局指令
    app.directive('lazy', {
    // 指令所在的元素，dom结构被解析完成
    // el 是元素本身，binding是一个对象，可以从里面解构出来当前的value值
    // mounted (el, binding) {
      mounted (el, { value }) {
        // console.log({ el, value })
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            // 如果元素可见
            if (isIntersecting) {
              // 替换原本的src路径，实现懒加载的操作
              el.src = value
              // 当图片出现破碎的时候，用默认的图片取代
              el.error = () => {
                el.src = defaultImg
              }
              stop()
            }
          }
        )
      }
    })
  }
}
